<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { useFs } from '@fast-crud/fast-crud';

import { getValidateRulesByFs } from '#/api/common/validateByFs';
import { DefDictConfig } from '#/api/devOperation/system/defDict';
import { BasicTitle } from '#/components/basic';
import { ActionEnum } from '#/enums/commonEnum';

import { createCrudOptions, frontRules } from './data/crud';
import DictItemTable from './modules/index.vue';

defineOptions({
  name: '字典管理',
  inheritAttrs: false,
});
const subTableRef = ref();
const { crudRef, crudBinding, crudExpose, appendCrudOptions } = useFs({
  createCrudOptions,
  context: { subTableRef },
});

// 页面打开后获取列表数据
onMounted(async () => {
  const addFormOptions = await getValidateRulesByFs({
    Api: DefDictConfig.Save,
    mode: ActionEnum.ADD,
    customRules: frontRules(crudExpose, ActionEnum.ADD),
    trigger: ['blur', 'change'],
  });
  const editFormOptions = await getValidateRulesByFs({
    Api: DefDictConfig.Update,
    mode: ActionEnum.EDIT,
    customRules: frontRules(crudExpose, ActionEnum.EDIT),
    trigger: ['blur', 'change'],
  });
  appendCrudOptions({ ...addFormOptions, ...editFormOptions });
  crudExpose.doRefresh();
});
</script>

<template>
  <FsPage>
    <FsCrud ref="crudRef" v-bind="crudBinding">
      <template #form-body-top>
        <BasicTitle span line style="margin-bottom: 1rem">字典</BasicTitle>
      </template>
      <template #form-body-bottom>
        <BasicTitle span line style="margin-bottom: 1rem">字典项</BasicTitle>
        <DictItemTable ref="subTableRef" />
      </template>
    </FsCrud>
  </FsPage>
</template>
